<template>
  <div style="padding-bottom: 10px">
    <Family :activeIndex="'soul'"></Family>
  </div>
  <!-- 查询，发布的表单 -->
  <div style="display: flex; justify-content: end">
    <ElForm :inline="true">
      <ElFormItem>
        <ElInput placeholder="标题模糊" v-model="queryInfo.title"> </ElInput>
      </ElFormItem>

      <ElFormItem>
        <ElInput placeholder="内容模糊" v-model="queryInfo.info"> </ElInput>
      </ElFormItem>

      <ElFormItem>
        <ElSelect
          v-model="page.order"
          placeholder="排序方式"
          style="width: 160px"
          @change="query"
        >
          <ElOption label="发帖时间" :value="1"></ElOption>
          <ElOption label="点赞数" :value="2"></ElOption>
          <ElOption label="评论数" :value="3"></ElOption>
          <ElOption label="点击量" :value="4"></ElOption>
          <ElOption label="默认主键" :value="-1"></ElOption>
        </ElSelect>
      </ElFormItem>

      <ElFormItem>
        <ElButton type="primary" @click="query" v-loading="loding" icon="Search"
          >查询</ElButton
        >

        <ElButton
          type="success"
          v-loading="loding"
          icon="Plus"
          @click="addDialog = true"
          >发布</ElButton
        >
      </ElFormItem>
    </ElForm>
  </div>

  <!-- 帖子内容循环 -->
  <div
    style="display: flex; flex-wrap: wrap; justify-content: space-around"
    v-loading="loding"
  >
    <ElCard
      v-for="i in list"
      style="flex: 0 0 25.33%; box-sizing: border-box; margin: 10px"
    >
      <div style="text-align: center">
        <ElLink @click="showDetail(i.message.id)">
          <div style="font-size: 18px; font-weight: 700">
            {{ i.message.title }}</div
          >
        </ElLink>

        <div style="text-align: end; display: flex; justify-content: end">
          <ElDropdown>
            <div style="display: flex; font-size: larger">
              <el-icon><Operation /></el-icon>
            </div>
            <template #dropdown>
              <ElDropdownItem
                @click="praise(i.message.id)"
                v-if="i.messageExInfo.praised"
                ><el-icon><StarFilled /></el-icon>已点赞</ElDropdownItem
              >
              <ElDropdownItem
                @click="praise(i.message.id)"
                v-if="!i.messageExInfo.praised"
                ><el-icon><Star /></el-icon>点赞</ElDropdownItem
              >
              <ElDropdownItem divided
                ><el-icon><Setting /></el-icon>修改</ElDropdownItem
              >
              <ElDropdownItem
                @click="deleted(i)"
                divided
                v-if="i.messageExInfo.mine"
                ><el-icon><DeleteFilled /></el-icon>删除</ElDropdownItem
              >
              <ElDropdownItem
                @click="deleted(i)"
                divided
                disabled
                v-if="!i.messageExInfo.mine"
                ><el-icon><DeleteFilled /></el-icon>删除</ElDropdownItem
              >
            </template>
          </ElDropdown>
        </div>
      </div>

      <ElDivider border-style="double">
        <el-icon><star-filled /></el-icon
      ></ElDivider>

      <div style="text-align: center; padding-bottom: 10px">
        <div v-html="i.message.info"></div>
        <div
          @click="queryByUid(i.user.user.uid)"
          class="hover-effect"
          :class="{ color: i.user.user.uid === user.data.user.uid }"
          >({{ i.user.user.username }})</div
        >
      </div>

      <ElDivider border-style="double">
        <el-icon><star-filled /></el-icon
      ></ElDivider>

      <div style="text-align: end; display: flex; justify-content: end">
        <div
          style="font-size: 14px; font-weight: 400; display: flex"
          @click="showDetail(i.message.id)"
        >
          <ElLink
            ><el-icon size="18"><Comment /></el-icon>
            {{ i.message.reply }}</ElLink
          >
        </div>
        <div
          style="
            font-size: 14px;
            font-weight: 400;
            padding-left: 10px;
            display: flex;
          "
        >
          <el-icon size="18"><Opportunity /></el-icon>{{ i.message.praise }}
        </div>
      </div>
      <div style="font-size: 13px">
        {{ i.message.lastupdate }}
      </div>
    </ElCard>
  </div>
  <!-- {{ page }} -->

  <!-- 分页 -->
  <div style="text-align: center; display: flex; justify-content: center">
    <!-- <el-pagination size="large" layout="prev, pager,next,jumper,total,sizes "  :page-sizes="[3, 5, 10, 20]" :total="page.total" v-model:page-size="page.pageSize"  v-model:current-page="page.pageNum" background @change="query"/> -->
    <Pagination :page="page" @change="query" />
  </div>

  <!-- 帖子详细信息的dialog -->

  <ElDialog v-model="DetailDialog" title="详情页" :close-on-click-modal="false">
    <div v-loading="loding">
      <ElForm>
        <ElFormItem v-for="i in DetailData">
          <div
            style="display: flex"
            v-if="i.user.user.uid != user.data.user.uid"
          >
            <div
              ><ElAvatar :size="30" src="../../../public/image/preview01.jpg">
              </ElAvatar
            ></div>
            <div style="font-size: 16px; display: flex">
              <div>
                {{ i.user.user.username }}
              </div>
            </div>
          </div>

          <div
            style="
              display: flex;
              justify-content: end;
              text-align: end;
              width: 1000px;
            "
            v-if="i.user.user.uid == user.data.user.uid"
          >
            <div style="margin-right: 10px"
              ><ElAvatar :size="30" src="../../../public/image/preview01.jpg">
              </ElAvatar
            ></div>
            <div style="font-size: 16px">
              <div>
                {{ i.user.user.username }}

                <!-- <ElLink type="warning" :underline="false"><el-icon><DeleteFilled /></el-icon></ElLink> -->
                <ElDropdown>
                  <div style="margin-top: 12px">
                    <el-icon><Setting /></el-icon>
                  </div>
                  <template #dropdown>
                    <ElDropdownMenu>
                      <el-dropdown-item @click="praiseReply(i)"
                        >点赞</el-dropdown-item
                      >

                      <el-dropdown-item @click="delReply(i)" divided>
                        删除</el-dropdown-item
                      >
                    </ElDropdownMenu>
                  </template>
                </ElDropdown>
              </div>
            </div>
          </div>

          <div
            style="width: 1000px"
            v-if="i.user.user.uid != user.data.user.uid"
          >
            <div style="border: 1px solid #f0f0f0">
              {{ i.tbReplyMessages.info }}
            </div>
            <div style="display: flex">
              <div>
                <el-icon size="24px"><StarFilled /></el-icon>
              </div>
              <div style="font-size: 18px">{{ i.tbReplyMessages.praise }}</div>
            </div>
          </div>

          <div
            style="width: 1000px"
            v-if="i.user.user.uid == user.data.user.uid"
          >
            <div
              style="
                border: 1px solid #f0f0f0;
                background-color: chartreuse;
                display: flex;
                justify-content: end;
              "
            >
              {{ i.tbReplyMessages.info }}
            </div>

            <div style="display: flex; justify-content: end">
              <div>
                <el-icon size="24px"><StarFilled /></el-icon>
              </div>
              <div style="font-size: 18px">{{ i.tbReplyMessages.praise }}</div>
            </div>
          </div>
        </ElFormItem>
      </ElForm>
      <Pagination
        :page="dpage"
        @change="showDetail(addReplyInfo.mid)"
      ></Pagination>
    </div>
    <ElForm style="display: flex; justify-content: center; margin-top: 10px">
      <ElFormItem>
        <ElInput
          suffix-icon="Plus"
          style="width: 500px"
          size="large"
          v-model="addReplyInfo.info"
        ></ElInput>
      </ElFormItem>

      <ElFormItem>
        <ElButton type="success" size="large" @click="addReply">回复</ElButton>
      </ElFormItem>
    </ElForm>
  </ElDialog>

  <!-- 发布帖子dialog -->
  <ElDialog
    title="发布帖子"
    v-model="addDialog"
    center="center"
    width="30%"
    style="background-color: #87ceeb"
    :close-on-click-modal="false"
  >
    <div>
      <ElForm>
        <ElFormItem>
          <ElInput v-model="addInfo.title"
            ><template #prefix
              ><el-icon style="color: #808080"><House /></el-icon
              ><div style="color: #808080"> 标题: </div></template
            ></ElInput
          >
        </ElFormItem>

        <ElFormItem>
          <ElInput placeholder="" v-model="addInfo.info" type="textarea">
            ><template #prefix
              ><el-icon style="#808080"><Reading /></el-icon
              ><div style="color: #808080"> 内容: </div></template
            ></ElInput
          >
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <ElButton @click="addDialog = false">取消</ElButton>
      <ElButton type="primary" @click="add">发布</ElButton>
    </template>
  </ElDialog>

  <!-- 查询uid用户详情的Dialog -->
  <div>
    <ElDialog v-model="dialoguid" :close-on-click-modal="false">
      <div style="text-align: center; margin-left: 100px">
        <div>
          <ElAvatar :size="100" :src="listuid.exinfo.logo"></ElAvatar>
        </div>
        <div>
          <ElButton
            v-if="!listuid.exinfo.mineFollow"
            type="success"
            @click="concern(listuid.user.uid)"
            >关注
          </ElButton>
          <ElButton
            v-if="listuid.exinfo.mineFollow && !listuid.exinfo.followMine"
            @click="concern(listuid.user.uid)"
            type="info"
            >已关注
          </ElButton>
          <ElButton
            v-if="listuid.exinfo.mineFollow && listuid.exinfo.followMine"
            @click="concern(listuid.user.uid)"
            type="info"
            >互相关注
          </ElButton>
          <ElButton type="info">私信 </ElButton>
        </div>
      </div>

      <ElForm
        :inline="true"
        :model="form"
        label-width="auto"
        style="max-width: 600px"
      >
        <ElFormItem label="nickname">
          <ElInput v-model="listuid.userInfo.nickname" disabled></ElInput>
        </ElFormItem>

        <ElFormItem label="username">
          <ElInput
            v-model="listuid.user.username"
            disabled
            size="large"
          ></ElInput>
        </ElFormItem>

        <ElFormItem label="info">
          <ElInput v-model="listuid.userInfo.info" disabled></ElInput>
        </ElFormItem>

        <ElFormItem label="sex">
          <ElRadioGroup v-model="listuid.userInfo.sex" disabled>
            <ElRadio label="男" value="f"></ElRadio>
            <ElRadio label="女" value="m"></ElRadio>
            <ElRadio label="保密" value="n"></ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem label="关注">
          <ElInput v-model="listuid.exinfo.mineFollows" disabled></ElInput>
        </ElFormItem>

        <ElFormItem label="粉丝">
          <ElInput v-model="listuid.exinfo.followMines" disabled></ElInput>
        </ElFormItem>
      </ElForm>
    </ElDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Api from '../../script/Api';
import {
  ElAlert,
  ElButton,
  ElCard,
  ElDialog,
  ElDivider,
  ElDropdown,
  ElForm,
  ElFormItem,
  ElIcon,
  ElInput,
  ElLink,
  ElMessage,
  ElPagination,
  ElAvatar,
  ElMessageBox,
  ElDropdownMenu,
  ElRadioGroup,
  ElRadio,
} from 'element-plus';
import Pagination from '../../comment/Pagination.vue';
import { storeToRefs } from 'pinia';
import userstore from '../../store/user';
import { Tools } from '../../script/Tools';
import { useFilter } from 'element-plus/es/components/tree-v2/src/composables/useFilter.mjs';
import User from '../../comment/user.vue';
import Family from '../../comment/family.vue';

const { isLogin, user } = storeToRefs(userstore());

const page = ref({
  pageNum: 1,
  pageSize: 3,
  order: 2,
});

const dpage = ref({
  pageNum: 1,
  pageSize: 5,
  order: 1,
});

const queryInfo = ref({
  title: '',
  info: '',
});
const loding = ref(false);

const list = ref([]);

//#region

const concern = (uid) => {
  Api.get(`/user/follow/${uid}`, {}, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
      queryByUid(uid);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//点赞帖子回复操作
const praiseReply = (info) => {
  Api.get(`/reply/praise/${info.tbReplyMessages.id}`, {}, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
      showDetail(info.tbReplyMessages.mid);
    } else {
      ElMessage.error(data.message);
    }
  });
};
//#region 通过uid查询用户信息
const listuid = ref([]);
const dialoguid = ref(false);

const queryByUid = (uid) => {
  Api.get(`/user/queryById/${uid}`, {}, (data) => {
    if (data.success) {
      dialoguid.value = true;

      console.log('ssss', data.data);
      listuid.value = data.data;
      ElMessage.success('');
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//删除相关操作
const deleted = (info) => {
  ElMessageBox.confirm(`是否删除(${info.message.title})?`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    Api.post('/message/delete', { id: info.message.id }, (data) => {
      if (data.success) {
        ElMessage.success(data.message);
        query();
      } else {
        ElMessage.error(data.message);
      }
    });
  });
};

//删除帖子评论操作
const delReply = (info) => {
  ElMessageBox.confirm(`是否删除(${info.tbReplyMessages.info})?`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    Api.get(`/reply/delete/${info.tbReplyMessages.id}`, {}, (data) => {
      console.log('data', data);
      if (data.success) {
        ElMessage.success(data.message);
        showDetail(info.tbReplyMessages.mid);
        query();
      } else {
        ElMessage.error(data.message);
      }
    });
  });
};

//发布帖子参数
const addDialog = ref(false);

const addInfo = ref({
  title: '',
  info: '',
});

//发布帖子评论操作
const addReplyInfo = ref({
  info: '',
  mid: '',
});
const addReply = () => {
  Api.post('/reply/add', addReplyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
      showDetail(addReplyInfo.value.mid);
      addReplyInfo.value.info = '';
    } else {
      ElMessage.error(data.message);
    }
  });
};

//点赞的相关操作
const praised = ref(false);

const praise = (id) => {
  Api.get(`/message/praise/${id}`, {}, (data) => {
    if (data.success) {
      query();
    } else {
      ElMessage.error(data.message);
    }
  });
};

//帖子详细信息参数
const DetailDialog = ref(false);
const DetailData = ref([]);

//发布帖子操作
const add = () => {
  Api.post('/message/add', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
      addDialog.value = false;
      addInfo.value = {};
      query();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const showDetail = (id) => {
  loding.value = true;
  DetailDialog.value = true;
  Api.get(
    `/message/detail/${id}/${dpage.value.pageNum}/${dpage.value.pageSize}/${dpage.value.order}`,
    {},
    (data) => {
      if (data.success) {
        loding.value = false;
        DetailData.value = data.data.replies;
        dpage.value = data.pageBean;
        addReplyInfo.value.mid = id;
      } else {
        ElMessage.error(data.message);
      }
    }
  );
};
const query = () => {
  loding.value = true;
  Api.get(
    `/message/query/${page.value.pageNum}/${page.value.pageSize}/${page.value.order}`,
    queryInfo.value,
    (data) => {
      loding.value = false;
      console.log('data', data);
      data.data.forEach((element) => {
        console.log('element', element);
        element.message.info = element.message.info.replace(/\r\n/g, '<br/>');
        element.message.info = element.message.info.replace(/\r/g, '<br/>');
        element.message.info = element.message.info.replace(/\n/g, '<br/>');
      });
      list.value = data.data;
      page.value = data.pageBean;
    }
  );
};
query();
</script>

<style scoped>
.body {
  margin: 0;
  background-image: url(../../../../imgage/jhk-1728621352151.jpg);
  background-position: center;
  background-size: cover;
}

.custom-input > el-input__inner {
  border-color: #ff0000; /* 红色边框 */
  background-color: #f0f0f0; /* 灰色背景 */
  color: #0000ff; /* 蓝色文本 */
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.hover-effect {
  padding: 10px;
  cursor: pointer;

  transition: color 0.3s, color 0.3s;
}

.hover-effect:hover {
  color: #265bd7;
}

.color {
  color: #16d8bf;
  font-size: large;
}
</style>
